import React, { Component } from 'react'
import {
    Card,
    Table,
    Button,
    message,
    Modal,
    Popconfirm
} from 'antd'

import api from '../../../api'
import AddForm from '../../../components/content/category/add-form'
import UpdateForm from '../../../components/content/category/update-form'
import icon from '../../../config/iconConfig'

const IconFont = icon.icon()

export default class Category extends Component {
    state = {
        loading: false, // 是否正在获取数据中
        categorys: [], // 一级分类列表
        subCategorys: [], // 二级分类列表
        parentId: '0', // 当前需要显示的分类列表的父分类ID
        parentName: '', // 当前需要显示的分类列表的父分类名称
        showStatus: 0, // 标识添加/更新的确认框是否显示, 0: 都不显示, 1: 显示添加, 2: 显示更新
    }
    /*
  初始化Table所有列的数组
   */
    initColumns = () => {
        this.columns = [
            {
                title: '分类的名称',
                dataIndex: 'name', // 显示数据对应的属性名
            },
            {
                title: '操作',
                width: 300,
                render: (category) => ( // 返回需要显示的界面标签
                    <span>
                        <Button type="link" onClick={() => this.showUpdate(category)}>修改分类</Button>
                        {/*如何向事件回调函数传递参数: 先定义一个匿名函数, 在函数调用处理的函数并传入数据*/}
                        {this.state.parentId === '0' ? <Button type="link" onClick={() => this.showSubCategorys(category)}>查看子分类</Button> : null}
                        <Popconfirm
                            title="是否删除该分类?"
                            onConfirm={this.confirmDel}
                            okText="是的"
                            cancelText="不了"
                        >
                            <Button type="link" style={{color:"red"}} onClick={() => this.category=category}>删除</Button>
                        </Popconfirm>

                    </span>
                )
            }
        ]
    }
    //删除
    confirmDel = async ()=>{
        const categoryId = this.category.categoryID
        let res = await api.category.delCategory({categoryId})
        if(res.data.status ===0 ){
             // 3. 重新显示列表
             this.getCategorys()
             message.success("删除成功")
        } else{
            message.error(res.data.msg)
        }
    }

    /*
    异步获取一级/二级分类列表显示
    parentId: 如果没有指定根据状态中的parentId请求, 如果指定了根据指定的请求
     */
    getCategorys = async (parentId) => {

        // 在发请求前, 显示loading
        this.setState({ loading: true })
        parentId = parentId || this.state.parentId
        const result = await api.category.data(parentId)
        console.log(result);
        // 在请求完成后, 隐藏loading
        this.setState({ loading: false })

        if (result.data.status === 0) {
            // 取出分类数组(可能是一级也可能二级的)
            const categorys = result.data.data
            if (parentId === '0') {
                // 更新一级分类状态
                this.setState({
                    categorys
                })
                console.log('----', this.state.categorys.length)
            } else {
                // 更新二级分类状态
                this.setState({
                    subCategorys: categorys
                })
            }
        } else {
            message.error(result.data.msg)
        }
    }

    /*
    显示指定一级分类对象的二子列表
     */
    showSubCategorys = (category) => {
        // 更新状态
        this.setState({
            parentId: category.categoryID,
            parentName: category.name
        }, () => { // 在状态更新且重新render()后执行
            console.log('parentId', this.state.parentId) // '0'
            // 获取二级分类列表显示
            this.getCategorys()
        })

        // setState()不能立即获取最新的状态: 因为setState()是异步更新状态的
        // console.log('parentId', this.state.parentId) // '0'
    }

    /*
    显示指定一级分类列表
     */
    showCategorys = () => {
        // 更新为显示一列表的状态
        this.setState({
            parentId: '0',
            parentName: '',
            subCategorys: []
        })
    }

    /*
    响应点击取消: 隐藏确定框
     */
    handleCancel = () => {
        // 清除输入数据
        this.form.resetFields()
        // 隐藏确认框
        this.setState({
            showStatus: 0
        })
    }

    /*
    显示添加的确认框
     */
    showAdd = () => {
        this.setState({
            showStatus: 1
        })
    }

    /*
    添加分类
     */
    addCategory = () => {
        this.form.validateFields().then(async values => {
            // 隐藏确认框
            this.setState({
                showStatus: 0
            })
            console.log(values);
            // 收集数据, 并提交添加分类的请求
            const { parentId, categoryName } = values
            // 清除输入数据
            this.form.resetFields()
            const result = await api.category.addCategory(values)
            if (result.data.status === 0) {
                // 添加的分类就是当前分类列表下的分类
                if (parentId === this.state.parentId) {
                    // 重新获取当前分类列表显示
                    this.getCategorys()
                } else if (parentId === '0') { // 在二级分类列表下添加一级分类, 重新获取一级分类列表, 但不需要显示一级列表
                    this.getCategorys('0')
                }
            }
        })
    }


    /*
    显示修改的确认框
     */
    showUpdate = (category) => {
        // 保存分类对象
        this.category = category
        // 更新状态
        this.setState({
            showStatus: 2
        })
    }

    /*
    更新分类
     */
    updateCategory = () => {
        console.log('updateCategory()')
        // 进行表单验证, 只有通过了才处理
        this.form.validateFields().then(async values => {
            // 1. 隐藏确定框
            this.setState({
                showStatus: 0
            })
            // 准备数据
            const categoryId = this.category.categoryID
            const { categoryName } = values
            // 清除输入数据
            this.form.resetFields()
            // 2. 发请求更新分类
            const result = await api.category.editCategory({ categoryId, categoryName })
            if (result.data.status === 0) {
                // 3. 重新显示列表
                this.getCategorys()
                message.success("修改成功")
            } else {
                message.error(result.data.msg)
            }
        })


    }



    /*
    为第一次render()准备数据
     */
    componentWillMount() {
        this.initColumns()
    }

    /*
    执行异步任务: 发异步ajax请求
     */
    componentDidMount() {
        // 获取一级分类列表显示
        this.getCategorys()
    }

    render() {
        // 读取状态数据
        const { categorys, subCategorys, parentId, parentName, loading, showStatus } = this.state
        // 读取指定的分类
        const category = this.category || {} // 如果还没有指定一个空对象

        // card的左侧
        const title = parentId === '0' ? '一级分类列表' : (
            <span>
                <Button type="link" onClick={this.showCategorys}>一级分类列表</Button>
                <IconFont type='icon-xianxingtubiaozhizuomoban-12' style={{ marginRight: 5 }} />
                <span>{parentName}</span>
            </span>
        )
        // Card的右侧
        const extra = (
            <Button type='primary' onClick={this.showAdd}>
                <IconFont type='icon-jia' />
        添加
            </Button>
        )

        return (
            <div id="category">
                <Card title={title} extra={extra}>
                    <Table
                        bordered
                        rowKey='categoryID'
                        loading={loading}
                        dataSource={parentId === '0' ? categorys : subCategorys}
                        columns={this.columns}
                        pagination={{ defaultPageSize: 5, showQuickJumper: true }}
                    />

                    <Modal
                        title="添加分类"
                        visible={showStatus === 1}
                        onOk={this.addCategory}
                        onCancel={this.handleCancel}
                    >
                        <AddForm
                            categorys={categorys}
                            parentId={parentId}
                            setForm={(form) => { this.form = form }}
                        />
                    </Modal>

                    <Modal
                        title="更新分类"
                        visible={showStatus === 2}
                        onOk={this.updateCategory}
                        onCancel={this.handleCancel}
                    >
                        <UpdateForm
                            categoryName={category.name ? category.name : ""}
                            setForm={(form) => { this.form = form }}
                        />
                    </Modal>
                </Card>
            </div>
        )
    }
}
